<!DOCTYPE html>
<html>
<head>
	<title>王禹的简历</title>
	<link rel="stylesheet" href="b.css">
	<script src="http://at.alicdn.com/t/font_1164850_ko957hgm2t.js"></script>
	<style type="text/css">
    .icon {
       width: 1em; height: 1em;
       vertical-align: -0.15em;
       fill: currentColor;
       overflow: hidden;
    }
	</style>
</head>
<body>
<div class="topNavBar " >
	<div class="barlinner clearfix">
			<a href="#" class="logo" >
					<span class="rs">RS</span><span class="card">card</span>
			</a>
			<nav>
				<ul>
					<li ><a href="#">ABOUT</a></li>
					<li ><a href="#">SKILLS</a></li>
					<li ><a href="#">EXPERIENCE</a></li>
					<li ><a href="#">PRICING</a></li>
					<li ><a href="#">BLOG</a></li>		
				</ul>
			</nav>
	</div>
</div>

<div class="banner">
	<div class="mask"></div>
</div>

<main>
	<div class="usercard">
		<div class="picandtext clearfix">
		 <div class="pic">
		 </div>
		
			<div class="welcome">
				<span class="hello">HELLO</span>
			    <div class="angel"></div>
			</div>
		
		<div class="self">
			<h1><span>I'm</span>WangYu</h1>
            <p>前端开发工程师</p>
            <hr>
            <dl>
            	<dt>年龄</dt>
            	<dd>25</dd>
            	<dt>地址</dt>
            	<dd>xxxxxxxxx</dd>
            	<dt>电话</dt>
            	<dd>xxxxxxxxx</dd>
            	<dt>E-MAIL</dt>
            	<dd>xxxxxxxxxxxxx</dd>
            </dl>
		 </div>
		</div>
		<footer class="media">
			<a href="" alt="...">
				<svg class="icon" aria-hidden="true">
					<use xlink:href="#icon-github"></use>
				</svg>
			</a>

			<a href="" alt="...">
				<svg class="icon" aria-hidden="true">
					<use xlink:href="#icon-web-icon-"></use>
				</svg>
			</a>

			<a href="" alt="...">
				<svg class="icon" aria-hidden="true">
					<use xlink:href="#icon-zhihu"></use>
				</svg>
			</a>

			<a href="" alt="...">
				<svg class="icon" aria-hidden="true">
					<use xlink:href="#icon-weibo"></use>
				</svg>
			</a>

			<a href="" alt="...">
				<svg class="icon" aria-hidden="true">
					<use xlink:href="#icon-weixin"></use>
				</svg>
			</a>
		</footer >
	</div>

</main>
<p class="download">
		<a class="buttom" href="./resume.pdf" target="_balnk" download="resume.pdf">DOWNLOAD RESUME</a>
</p>
<p class="text">
	Hello! I’m Robert Smith. Senior Web Developer specializing in front end development. Experienced with all stages of the development cycle for dynamic web projects. Well-versed in numerous programming languages including JavaScript, SQL, and C. Stng background in project management and customer relations.
</p>
	

<section class="skills clearfix">
	<h2>Professional Skills</h2>
	<ol class="">
		<li>HTML 5 &amp; CSS 3
			<div class="skillprogress">
			<div class="progress1"></div></div>
		</li>
	
		
		<li>JavaScript
				<div class="skillprogress">
						<div class="progress2"></div></div>
		</li>
		<li>jQuery
				<div class="skillprogress">
						<div class="progress3"></div></div>
		</li>
		<li>Vue
				<div class="skillprogress">
						<div class="progress4"></div></div>
		</li>
		<li>React
				<div class="skillprogress">
						<div class="progress5"></div></div>
		</li>
		<li>HTTP
				<div class="skillprogress">
						<div class="progress6"></div></div>
		</li>
	</ol>
</section>

<section>
	<h2>作品集</h2>
	<nav>
			<p>所有</p>
			<p>原生JS</p>
			<p>框架</p>
			<p>其他</p>				
	</nav>
	<div class="works">
		<div class="big"></div>
		<div class="small"></div>
		<div class="small"></div>
	</div>
</section>

</body>
</html>